<template>
    <div class="filters">
        <el-row type="flex" class="filters-top" justify="space-between" align="middle">
            <el-col :span="8">
                单程： 
                {{data.info.departCity}} - {{data.info.destCity}} 
                / 
                {{data.info.departDate}}
            </el-col>
            <el-col :span="4">
                <el-select size="mini" v-model="airport" placeholder="起飞机场" @change="handleAirport">
                    <el-option
                    v-for="(item, index) in data.options.airport"
                    :key="index"
                    :label="item"
                    :value="item"
                    >
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-select size="mini" v-model="flightTimes"    placeholder="起飞时间" @change="handleFlightTimes">
                    <el-option
                    v-for="(item, index) in data.options.flightTimes"
                    :key="index"
                    :label="`${item.from}:00 - ${item.to}:00`"
                    :value="`${item.from},${item.to}`"
                    >
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-select size="mini" v-model="company"  placeholder="航空公司" @change="handleCompany">
                    <el-option
                    v-for="(item, index) in data.options.company"
                    :key="index"
                    :label="item"
                    :value="item"
                    >
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-select size="mini" v-model="airSize" placeholder="机型" @change="handleAirSize">
                    <el-option
                    v-for="(item, index) in sizeOptions"
                    :key="index"
                    :label="item.name"
                    :value="item.size"
                    >
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
        <div class="filter-cancel">
            筛选：
            <el-button 
                       type="primary" 
                       round 
                       plain 
                       size="mini" 
                       @click="handleFiltersCancel">
                撤销
    		</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            sizeOptions: [
                {name: "大", size: "L"},
                {name: "中", size: "M"},
                {name: "小", size: "S"},
            ],
            airport: "",        // 机场
            flightTimes: "",    // 出发时间
            company: "",        // 航空公司
            airSize: "",        // 机型大小

            newData:""
        }
    },
    props:{
        data: {
            type: Object,
            default: ()=>({})
        }
    },
    methods: {
       // 选择机场时候触发
       handleAirport(value){
            // const arr = this.data.flights.filter(v => 
            //     v.org_airport_name == value
            // );

            // this.$emit("setDataList", arr);
            this.flash()
        },

        // 选择出发时间时候触发
        handleFlightTimes(value){
            // const [from, to] = value.split(","); // [6,12]
            
            // const arr = this.data.flights.filter(v => {
            //     // 出发时间小时
            //     const start = +v.dep_time.split(":")[0];
            //     return start >= from && start < to;
            // });
            
            // this.$emit("setDataList", arr);
            this.flash()
        },

         // 选择航空公司时候触发
        handleCompany(value){
            // const arr = this.data.flights.filter(v => 
            //     v.airline_name == value
            // );
            // console.log(120,arr)
            // this.$emit("setDataList", arr);
            this.flash()
        },

         // 选择机型时候触发
        handleAirSize(value){
        //    const arr = this.data.flights.filter(v => 
        //         v.plane_size == value
        //     );
        //     console.log(129,arr)
        //     this.$emit("setDataList", arr);
        this.flash()
        },
        
        // 撤销条件时候触发
        handleFiltersCancel(){
            this.airport = "";
            this.flightTimes = "";
            this.company = "";
            this.airSize = "";
            
            this.$emit("setDataList", this.data.flights);
        },
        flash(){
            const newData = this.data.flights.filter(v => {
                // 假设当前的数据都是符合条件
                let valid = true;

                // 找到不符合条件的
                if(this.company && v.airline_name !== this.company){
                    valid = false;
                }

                // 机型大小
                if(this.airSize && v.plane_size !== this.airSize){
                    valid = false;
                }

                // 机场
                if(this.airport && v.org_airport_name !== this.airport){
                    valid = false;
                }

                // 时间
                if(this.flightTimes){
                    // 选中的时间段
                    const arr = this.flightTimes.split(","); // ["6","12"]
                    // 当前航班小时
                    const hours = Number(v.dep_time.split(":")[0]);
                    
                    // 如果出发的小时不在时间段内，认为是不合法
                    if(Number(arr[0]) > hours || hours >= Number(arr[1])){
                        valid = false;
                    }
                }

                return valid;
            })

            this.$emit("setDataList", newData);
            return "";
        }
    }
}
</script>

 